<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/admin/css/pearForm.css}"/>
    <link rel="stylesheet" th:href="@{/admin/css/easyeditor.css}"/>
    <link rel="stylesheet" th:href="@{/admin/css/fangge-style.css}"/>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <style type="text/css">
        body {
            margin: 10px;
            background-color: whitesmoke;
            font-family: 'Roboto', sans-serif;
            font-size: 14px;
        }

        #parent {
            cursor: pointer;
        }

    </style>
</head>
<body>

<input type="hidden" id="projectId" th:value="${projectId}">
<div id="sourceTreeDiv" class="layui-bg-gray" style="display: none">

</div>

<div class="layui-fluid">
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" id="name" name="name" required lay-verify="required" placeholder="请输入名称"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">标识</label>
            <div class="layui-input-block">
                <input type="text" id="tag" name="tag" required lay-verify="required" placeholder="请输入标识"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">父级</label>
            <div class="layui-input-block">
                <input type="text" name="parent" id="parent" readonly="readonly" required lay-verify="required"
                       placeholder="请选择父级"
                       autocomplete="off"
                       class="layui-input">

                <input type="hidden" id="pid" value="root">
            </div>
        </div>
    </form>
</div>

<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/admin/js/jquery.js}"></script>
<script th:src="@{/admin/js/util.js}"></script>
<script type="text/javascript" th:inline="javascript">


    function getResourceData() {
        return {
            "name": $("#name").val(),
            "tag": $("#tag").val(),
            "pid": $("#pid").val()/*,
            "type": $("#type").val(),*/
        };
    }

    layui.use([
        'util',
        'layer',
        'element',
        'jquery',
        'tree'], function () {
        var tree = layui.tree;
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;

        var treeData = null;

        var projectId = $("#projectId").val();

        $.ajax({
            type: 'GET',
            url: '/restdoc/' + projectId + '/resource/tree',
            async: false,
            success: function (data) {
                if (data['code'] === "200") {
                    treeData = data['data'];
                } else {
                    layer.msg(data['message']);
                }
            },
            error: function () {
                layer.msg("网络异常")
            }
        });

        tree.render({
            elem: '#sourceTreeDiv'
            , data: treeData
            , id: 'id'
            , showCheckbox: true
            , oncheck: function (obj) {
                console.log(obj.data.id);
                checkData = obj.data.id;
                $('#pid').val(obj.data.id);
                $("#parent").val(obj.data.title);
            }
        });
        tree.setChecked('id', "root");
        var checkData = tree.getChecked('id');


        $('#parent').click(function () {
            layer.open({
                type: 1,
                title: '选择目录',
                content: $('#sourceTreeDiv'),
                area: ['300px', '400px'],
                btn: ['确定', '取消'],
                yes: function (index, layero) {
                    layer.close(index)
                }
            });
        });

    });
</script>
</body>
</html>